<template>
  <el-container v-cloak>
    <el-header>
      <el-row>
        <el-col :span="5">
          <div class="home-showtitle">XX管理系统</div>
        </el-col>
        <el-col :span="12">
          <div class="home-showtitle-tip">本月正常出勤 10 天 请假 0 天 加班 20 小时</div>
        </el-col>
        <el-col :span="7">
          <el-row>
            <el-col :span="3" class="txt-white">欢迎您:</el-col>
            <el-col :span="9" class="txt-white">{{$auth.user.name}}</el-col>
            <el-col :span="3" class="txt-white">今天:</el-col>
            <el-col :span="9" class="txt-white">{{new Date()|showTime}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-link href="/">首页</el-link>
            </el-col>
            <el-col :span="6">
              <el-link @click="btnShowAddressBook">通讯簿</el-link>
            </el-col>
            <el-col :span="6">
              <el-link @click="btnChangePasswd">修改密码</el-link>
            </el-col>
            <el-col :span="6">
              <el-link @click="btnlogout">退出系统</el-link>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="margin:0;padding:0px;">
      <nuxt />
    </el-main>
    <el-drawer
      title="修改密码"
      :visible.sync="showChangePwd"
      direction="btt"
      :before-close="closeChangePasswd"
    >
      <span>我来啦!</span>
    </el-drawer>
    <el-drawer
      title="通讯录"
      :visible.sync="showAddressList"
      direction="rtl"
      :before-close="closeAddressBook"
    >
      <span>我来啦!</span>
    </el-drawer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      showChangePwd: false, //显示密码
      showAddressList: false //显示通讯录
    };
  },
  mounted() {},
  methods: {
    async btnlogout() {
      try {
        let that = this;
        this.$confirm("确定要退出系统, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            that.$auth.logout();
            that.$store.commit("setjwtStr", "");
            location.href = "/login";
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      } catch (error) {
        console.log(error);
      }
    },
    //显示通讯录
    async btnShowAddressBook() {
      this.showAddressList = true;
    },
    //显示 修改密码
    async btnChangePasswd() {
      this.showChangePwd = true;
    },
    //关闭通讯录
    async closeAddressBook() {
      this.showAddressList = false;
    },
    //关闭修密码
    async closeChangePasswd() {
      let that = this;
      this.$confirm("确定要放弃修改密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          that.showChangePwd = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消放弃修改密码"
          });
        });
    }
  },
  filters: {
    //
    showTime(v) {
      return (
        v.getFullYear() + "年" + (v.getMonth() + 1) + "月" + v.getDate() + "日"
      );
    }
  }
};
</script>

<style>
.el-header {
  background-color: rgb(41, 130, 231);
}
</style>
